<template>
	<view class="content" v-if="show">
		<image src="/static/indexbg.png" mode="widthFix" class='bgimg'></image>
		<view style="position: relative;z-index: 1;">
			<view class='titleview'>
				<view>
					<view class='title'>{{title}}</view>
					<view class='desc'>{{desc}}</view>
				</view>
				<image src="/static/indeximg.png" mode="widthFix" style="width: 303rpx;"></image>
			</view>
			<view class='card' style="margin-top: -100rpx;">
				<view class='cardtitle'>生活缴费</view>
				<view class='feeitems'>
					<view class='feeitem' @click="onFee(0)" :class='{disabled: !canfee[0] || canfee[0] == 0}'>
						<image class='feetag' src='/static/hot_icon.png'></image>
						<view style="text-align: center;">
							<view class='feetitle'>话费充值</view>
							<view class='feedesc' v-if="canfee[0] > 0">限时{{canfee[0]}}折起</view>
						</view>
						<image class='feeicon' src="/static/hf_icon.jpeg"></image>
					</view>
					<view class='feeitem flex flex-pack-around' @click="onFee(1)" :class='{disabled: !canfee[1] || canfee[1] == 0}'>
						<image class='feetag' src='/static/hot_icon.png'></image>
						<image class='feeicon' src="/static/df_icon.png"></image>
						<view>
							<view class='feetitle'>电费充值</view>
							<view class='feedesc' v-if="canfee[1] > 0">限时{{canfee[1]}}折起</view>
						</view>
					</view>
					<view class='feeitem flex flex-pack-around' @click="onFee(2)" :class='{disabled: !canfee[2] || canfee[2] == 0}'>
						<image class='feetag' src='/static/hot_icon.png'></image>
						<image class='feeicon' src="/static/rq_icon.png"></image>
						<view>
							<view class='feetitle'>燃气充值</view>
							<view class='feedesc' v-if="canfee[2] > 0">限时{{canfee[2]}}折起</view>
						</view>
					</view>
				</view>
			</view>
			<view class='card' style="background: #FFEDD3;">
				<view class='cardtitle' style="color: #6B430A;">会员充值</view>
				<view class='goodlist'>
					<uv-tabs :activeStyle="{fontWeight:'bold'}" :list="labels" @change="onTab"></uv-tabs>
					<view class='gooditems' v-if="goods">
						<view class='gooditem' v-for="g in goods[cid]" @click="onGood(g.id)">
							<view class='goodlogo'><image :src="g.logo"></image></view>{{g.title}}
						</view>
					</view>
				</view>
			</view>
			<view style="margin: 0 30rpx" @click="onAgent">
				<image src="/static/agentbanner.png" mode="widthFix" style="width: 100%;"></image>
			</view>
		</view>
		<view class='copyright'>{{copyright}}</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				show:false,
				labels:[],
				cid:0,
				goods:false,
				title:'',
				desc:'',
				canfee:{},
				copyright:false,
				isagent:0,
			}
		},
		onLoad(options) {
			var t = this;
			this.util.post('index',{},(r)=>{
				t.show = true;
				t.labels = r.cate;
				t.title = r.title;
				t.desc = r.desc;
				t.cid = r.cate[0].id;
				t.goods = r.goods;
				t.canfee = r.canfee;
				t.isagent = r.isagent;
				if(r.copyright) t.copyright = r.copyright
				
				app.globalData.setShareInfo(r.sharedata);
			})
		},
		methods: {
			onAgent(){
				if(this.isagent) uni.switchTab({
					url:'/pages/agent/index'
				})
				else uni.navigateTo({
					url:'/pages/agent/level'
				})
			},
			onTab(e){
				this.cid = e.id;
			},
			onFee(type){
				if(!this.canfee[type] || this.canfee[type] == 0) return uni.showToast({
					title:'尽请期待',
					icon:'none'
				})
				uni.navigateTo({
					url:'/pages/index/fee?type='+type
				})
			},
			onGood(gid){
				uni.navigateTo({
					url:'/pages/index/detail?gid='+gid
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #f4f5f9;
		height: 100vh;
		.bgimg{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
		}
		.titleview{
			color: white;
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			.title{
				font-size: 46rpx;
				margin: 10rpx 0;
				margin-top: 20rpx;
			}
			.desc{
				font-size: 26rpx;
				opacity: .5;
			}
		}
		.feeitems{
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 1fr 1fr;
			grid-gap: 20rpx;
			.feeitem{
				background: rgba(42, 137, 248, .1);
				border: 1px solid #F5F6FA;
				border-radius: 16rpx;
				position: relative;
				padding: 30rpx;
				&.disabled{
					opacity: .5;
					.feetag{
						display: none;
					}
				}
				&:first-child{
					grid-row-start: span 2;
					.feeicon{
						width: 96rpx;
						height: 132rpx;
						margin: 30rpx auto 0;
						display: block;
					}
				}
				.feetag{
					width: 69rpx;
					height: 36rpx;
					position: absolute;
					top: 0;
					left: 0;
				}
				.feetitle{
					font-size: 32rpx;
					font-weight: bold;
				}
				.feedesc{
					font-size: 28rpx;
					color: gray;
				}
				.feeicon{
					width: 48rpx;
					height: 66rpx;
				}
			}
		}
		.goodlist{
			background: white;
			border-radius: 16rpx;
			padding: 10rpx 30rpx;
			margin: -16rpx;
			.gooditems{
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr;
				grid-gap: 20rpx;
				padding: 20rpx 0;
				.gooditem{
					font-size: 28rpx;
					text-align: center;
					.goodlogo{
						background: #F5F6FA;
						border-radius: 10rpx;
						padding: 10rpx;
						margin-bottom: 14rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 140rpx;
						height: 140rpx;
						image{
							width: 98rpx;
							height: 98rpx;
						}
					}
				}
			}
		}
	}
</style>
